/** @odoo-module */

import { loadJS } from "@web/core/assets";
import { getColor } from "@web/views/graph/colors";

const { Component, onWillStart, useRef, onMounted, onWillUnmount } = owl;

export class PieChart extends Component {
    setup() {
        this.canvasRef = useRef("canvas");

        // console.log('this.props',this.props) // {data: {m: 10, s: 4, xl: 3}, label: 'hello aa'}
        
        this.labels = Object.keys(this.props.data); // Object.keys是js的内置方法，当你传入一个对象时，返回该对象所有属性的名称数组。
        this.data = Object.values(this.props.data);
        this.color = this.labels.map((_, index) => { // 获取不同尺码对应的不同颜色
            return getColor(index);
        });

        onWillStart(() => { // 在呈现组件之前应该执行的异步代码
            return loadJS(["/web/static/lib/Chart/Chart.js"]); // loadJS用来懒加载js文件。Chart.js是图表视图使用的图标库，模块情况下不会被加载，需要进行懒加载
        });

        onMounted(() => { // 挂载组件时应该执行的代码
            this.renderChart();
        });

        onWillUnmount(() => { //在卸载组件之前应该执行的代码
            if (this.chart) {
                this.chart.destroy();
            }
        });
    }
    // 渲染图表
    renderChart() {
        if (this.chart) {
            this.chart.destroy();
        }
        this.chart = new Chart(this.canvasRef.el, {
            type: "pie",
            data: {
                labels: this.labels,
                datasets: [
                    {
                        label: this.props.label,
                        data: this.data,
                        backgroundColor: this.color,
                    },
                ],
            },
            options: {
                onClick: this.onPieClick.bind(this)  // 定义饼图的点击事件
            }
        });
    }
    // 点击饼图扇区，调用父级传递的事件
    onPieClick(ev, chartElem) {
        // console.log('chartElem', chartElem) // chartElem代表饼图的每一块（对应上面的this）
        const clickedIndex = chartElem[0]._index;
        this.props.onPieClick(this.labels[clickedIndex]) // 将 被点击的 图饼的某个扇区的index 传递给父级
    }
}

PieChart.template = "awesome_tshirt.PieChart";
PieChart.props = {
    data: { type: Object },
    label: { type: String },
    onPieClick: { type: Function },
}